<template>
  <div class="maskCenter">
    <div id="box" :class="visible ? 'systemDialog' : 'systemDialog-hide'" style="width: 476px"
      :style="'height:' + divHeight + 'px;'">
      <div class="dialog-header" v-movew>
        <span>{{ title }}</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body" :style="'height:' + (divHeight - 100) + 'px;'">
        <el-form ref="form" label-width="75px" :label-position="'left'">
          <el-form-item label="名称:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.name"></el-input>
            </el-col>
            <!--<el-col :span="6"><div >别名:</div></el-col>
						<el-col :span="9">
							<el-input class="systemInput" v-model="nodeAttr.title"></el-input>
            </el-col>-->
          </el-form-item>

          <el-form-item label="描述:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.note"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="消息类型:">
            <el-col :span="5" style="text-align: left">
              <el-checkbox systemCheckbox v-model="nodeAttr.sms">短信</el-checkbox>
            </el-col>
            <el-col :span="7" style="text-align: left">
              <el-checkbox systemCheckbox v-model="nodeAttr.jpush">极光推送</el-checkbox>
            </el-col>
          </el-form-item>

          <el-form-item label="关联模块:">
            <el-col :span="20">
              <el-input class="systemInput" v-model="nodeAttr.funcName" readonly></el-input>
            </el-col>
            <el-col :span="4">
              <!-- <div class="btnConfirm btndiv" @click="showMenu">
                <div style="height:100%">...</div>
              </div>-->
              <i class="el-icon-more" @click="showMenu"></i>
            </el-col>
          </el-form-item>

          <!--<el-form-item label="业务类型:">
						<el-col :span="9">
							<el-select class="systemInput" v-model="nodeAttr.type" placeholder="" style="width:137.6px;">
								<el-option
							      v-for="item in types"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>
						</el-col>
						<el-col :span="6"><div >业务状态:</div></el-col>
						<el-col :span="9">
							<el-select class="systemInput" v-model="nodeAttr.state" placeholder="" style="width:137.6px;">
								<el-option
							      v-for="item in states"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>
						</el-col>						
					</el-form-item>
					
					<el-form-item label="分派角色:">
						<el-col :span="20">
							<el-input class="systemInput" v-model="nodeAttr.managerole"></el-input>
						</el-col>
						<el-col :span="4">
							<div class="btndiv">...</div>
						</el-col>
					</el-form-item>
					
					<el-form-item label="执行角色:">
						<el-col :span="14">
							<el-input class="systemInput" v-model="nodeAttr.actrole"></el-input>
						</el-col>
						<el-col :span="4">
							<div class="btndiv">...</div>
						</el-col>
						<el-col :span="6">
							<el-checkbox  label="自动分配"></el-checkbox>
						</el-col>
          </el-form-item>-->

          <el-form-item label="执行时限:">
            <el-col :span="9">
              <el-input-number class="systemInput" v-model="nodeAttr.limitHour" controls-position="right"
                :min="1"></el-input-number>
            </el-col>
            <el-col :span="3" style="text-align: left; padding-left: 4px">小时</el-col>
            <el-col :span="3" style="text-align: right; padding-right: 4px">类型:</el-col>
            <el-col :span="9">
              <el-select class="systemInput" v-model="nodeAttr.runType" placeholder style="width: 137.6px">
                <el-option v-for="item in runTypes" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <!--<el-form-item label="可见条件:">
						<el-col :span="24">
							<el-input class="systemInput" v-model="nodeAttr.visible"></el-input>
						</el-col>
					</el-form-item>
					
					<el-form-item label="紧急程度:">
						<el-col :span="9">
							<el-select class="systemInput" v-model="nodeAttr.important" placeholder="" style="width:137.6px;">
								<el-option
							      v-for="item in importants"
							      :key="item.id"
							      :label="item.name"
							      :value="item.id">
							    </el-option>
							</el-select>
						</el-col>
						<el-col :span="6"><div >导图序号:</div></el-col>
						<el-col :span="9">
							<el-input class="systemInput" v-model="nodeAttr.ord"></el-input>
						</el-col>						
          </el-form-item>-->

          <el-form-item class="noLabel">
            <el-col :span="24">
              <el-tabs v-model="activeName">
                <el-tab-pane label="启动脚本" name="first">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
                    v-model="nodeAttr.startScript" :resize="'none'"></el-input>
                </el-tab-pane>
                <el-tab-pane label="结束脚本" name="second">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
                    v-model="nodeAttr.endScript" :resize="'none'"></el-input>
                </el-tab-pane>
                <el-tab-pane label="回退脚本" name="third">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }"
                    v-model="nodeAttr.backScript" :resize="'none'"></el-input>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-form-item>

          <el-form-item class="noLabel lastitem" style="margin-bottom: 16px;">
            <el-col :span="3">
              <el-checkbox systemCheckbox label="重要" v-model="nodeAttr.major"></el-checkbox>
            </el-col>
            <el-col :span="5">
              <el-checkbox systemCheckbox label="开始多次" v-model="nodeAttr.moreBegin"></el-checkbox>
            </el-col>
            <el-col :span="5" style="text-align: left">
              <el-checkbox systemCheckbox label="多次结束" v-model="nodeAttr.moreEnd"></el-checkbox>
            </el-col>
            <el-col :span="5" style="text-align: left">
              <el-checkbox systemCheckbox label="逐一处理" v-model="nodeAttr.userOneByOne"></el-checkbox>
            </el-col>
            <el-col :span="6">
              <div class="btndiv btndivrole" @click="showWinRole">备选角色</div>
            </el-col>
          </el-form-item>
          <el-form-item label="聚合类型:">
            <el-col :span="24">
              <el-select class="systemInput" v-model="nodeAttr.aggregation" placeholder style="width:100%">
                <el-option v-for="item in aggregations" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="okclick">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
      <winMenu v-if="showWinMenu" @close="showWinMenu = false" @ok="saveMenu"></winMenu>
      <winRoleSelect v-if="showRole" :activeRole="activeRole" @close="closeRole" @ok="setRole"></winRoleSelect>
    </div>
  </div>
</template>

<script>
import movew from "@/directives/winmove";
import {
  deepCopy
} from "@/utils/public";
import winMenu from "@/system/components/winMenu.vue";
import winRoleSelect from "@/system/components/winRoleSelect.vue";

export default {
  directives: {
    movew,
  },
  name: "winBussinesLink",
  props: {
    activeNode: {
      default: null,
    },
  },
  data() {
    return {
      visible: true,
      title: "节点属性",
      types: [],
      nodeAttr: {},
      states: [{
        id: 1,
        name: "待建"
      },
      {
        id: 2,
        name: "在建"
      },
      {
        id: 3,
        name: "竣工"
      },
      {
        id: 4,
        name: "完成"
      },
      ],
      types: [{
        id: 1,
        name: "项目"
      },
      {
        id: 2,
        name: "合同"
      },
      {
        id: 3,
        name: "工程"
      },
      {
        id: 4,
        name: "绩效"
      },
      {
        id: 5,
        name: "分包"
      },
      ],
      runTypes: [{
        id: 0,
        name: "开始节点"
      },
      {
        id: 2,
        name: "中间节点"
      },
      {
        id: 1,
        name: "结束节点"
      },
      ],
      aggregations: [{
        id: 0,
        name: "有求必应"
      }, {
        id: 1,
        name: "先到先得"
      }, {
        id: 2,
        name: "后到先得"
      }],
      importants: [{
        id: 1,
        name: "一般"
      },
      {
        id: 2,
        name: "重要"
      },
      {
        id: 3,
        name: "紧急"
      },
      ],
      activeName: "first",
      divHeight: 603,
      showWinMenu: false,
      showRole: false,
      activeRole: [],
    };
  },
  components: {
    winMenu,
    winRoleSelect,
  },
  mounted() {
    if (this.activeNode) {
      this.nodeAttr = deepCopy(this.activeNode);
      if (this.nodeAttr.jpush == null) {
        this.$set(this.nodeAttr, "jpush", true);
      }
    } else { }
    let canUseHeight = document.documentElement.clientHeight - 80;
    if (this.divHeight > canUseHeight) {
      this.divHeight = document.documentElement.clientHeight - 80;
    }
  },
  methods: {
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    okclick() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("ok", this.nodeAttr);
      }, 400);
    },
    saveMenu(e) {
      this.showWinMenu = false;
      this.$set(this.nodeAttr, "funcId", e.id);
      this.$set(this.nodeAttr, "funcName", e.name);
      this.$set(this.nodeAttr, "name", e.name);
      console.log(e);
    },
    showMenu() {
      this.showWinMenu = true;
    },
    closeRole() {
      this.showRole = false;
    },
    setRole(e) {
      this.showRole = false;
      console.log(e);
      this.nodeAttr.role = e;
    },
    showWinRole() {
      this.showRole = true;
      if (this.nodeAttr.role) {
        this.activeRole = this.nodeAttr.role;
      }
    },
  },
};
</script>

<style scoped>
.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}

.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}

.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.dialog-body {
  flex-direction: row;
  color: var(--system-page-topbar-text-color);
  overflow-y: auto;
}

.btndiv {
  border: 1px solid var(--button-border-color);
  border-radius: 4px;
  margin-left: 5px;
  line-height: 32px;
  text-align: center;
  height: 32px;
}

.btndiv:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndiv:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndivrole {
  width: 100px;
}

/*每行的标签高度设为32px*/
>>>.el-form-item__label {
  line-height: 32px;
}

/*设置el-form-item的高度*/
>>>.el-form-item__content {
  height: 32px;
  line-height: 32px;
}

/*数字输入框的上箭头行高*/
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
  line-height: 16px !important;
}

/*数字输入样式*/
>>>.el-input-number {
  line-height: 32px;
  width: 100%;
}

/*element 输入框样式*/
>>>.el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*element 下拉框*/

>>>.el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}

/*下拉框箭头*/

>>>.el-select__caret {
  line-height: 32px;
}

/*el-form-item 每行离底部多元*/
>>>.el-form-item {
  margin-bottom: 16px;
}

/*tabs 样式*/
>>>.el-tabs__header {
  margin: 0;
}

.el-tabs {
  height: 100%;
}

>>>.el-tabs__active-bar {
  width: 80px !important;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}

>>>.el-tabs__item {
  padding: 0 !important;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
  text-align: center;
  border: none;
  min-width: 80px;
}

/*活动颜色*/
>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
>>>.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: var(--page-back-color);
}

/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel>>>.el-form-item__content {
  margin-left: 0 !important;
}

.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}

/*element 输入框的 focus hover样式*/
>>>.el-input__inner:focus,
>>>.el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>>.el-input__inner:hover,
>>>.el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}

>>>.el-form-item__label,
>>>.el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

>>>.el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.lastitem {
  margin-bottom: 0px;
}

i {
  float: right;
  cursor: pointer;
  color: rgba(64, 158, 255, 1);
  width: 56px;
  height: 32px;
  line-height: 32px;
  background: rgba(153, 153, 153, 0);
  border: 1px solid rgba(190, 190, 190, 1);
  border-radius: 4px;
  margin-left: 8px;
}
</style>
